<template>
  <div class="space-y-6">
    <!-- 收藏分类 -->
    <div class="bg-white rounded-xl shadow-sm p-5">
      <h3 class="font-semibold text-gray-900 mb-4">收藏分类(未实现)</h3>
      <div class="space-y-2">
        <button class="w-full text-left flex items-center justify-between p-3 rounded-lg bg-primary/10 text-primary font-medium transition-colors">
          <span>全部分类</span>
          <span class="bg-primary/20 text-primary text-xs px-2 py-1 rounded-full">5</span>
        </button>
        <button class="w-full text-left flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
          <span>技术讨论</span>
          <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">3</span>
        </button>
        <button class="w-full text-left flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
          <span>生活分享</span>
          <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">2</span>
        </button>
        <button class="w-full text-left flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
          <span>问答求助</span>
          <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">0</span>
        </button>
        <button class="w-full text-left flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
          <span>资源分享</span>
          <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">0</span>
        </button>
        <button class="w-full text-left flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
          <span>职场经验</span>
          <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">0</span>
        </button>
      </div>
    </div>
    
    <!-- 收藏标签云 -->
    <div class="bg-white rounded-xl shadow-sm p-5">
      <h3 class="font-semibold text-gray-900 mb-4">热门标签(未实现)</h3>
      <div class="flex flex-wrap gap-2">
        <button class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full hover:bg-primary/20 transition-colors">
          #前端开发
        </button>
        <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
          #React
        </button>
        <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
          #UI设计
        </button>
        <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
          #数据分析
        </button>
        <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
          #Python
        </button>
        <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
          #远程工作
        </button>
        <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
          #面试技巧
        </button>
        <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
          #用户体验
        </button>
      </div>
    </div>
    
    <!-- 你可能感兴趣 -->
    <div class="bg-white rounded-xl shadow-sm p-5">
      <h3 class="font-semibold text-gray-900 mb-4">你可能感兴趣(未实现)</h3>
      <div class="space-y-4">
        <a href="#" class="flex items-start space-x-3 group">
          <div class="shrink-0 w-16 h-16 bg-gray-100 rounded-lg overflow-hidden">
            <img src="https://picsum.photos/seed/interest1/200/200" alt="帖子缩略图" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
          </div>
          <div class="flex-1">
            <h4 class="text-sm font-medium text-gray-900 line-clamp-2 group-hover:text-primary transition-colors">10个提升JavaScript代码质量的实用技巧</h4>
            <p class="text-xs text-gray-500 mt-1">2.1k 阅读 · 3天前</p>
          </div>
        </a>
        <a href="#" class="flex items-start space-x-3 group">
          <div class="shrink-0 w-16 h-16 bg-gray-100 rounded-lg overflow-hidden">
            <img src="https://picsum.photos/seed/interest2/200/200" alt="帖子缩略图" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
          </div>
          <div class="flex-1">
            <h4 class="text-sm font-medium text-gray-900 line-clamp-2 group-hover:text-primary transition-colors">从零开始学习Docker：容器化你的应用</h4>
            <p class="text-xs text-gray-500 mt-1">3.4k 阅读 · 5天前</p>
          </div>
        </a>
        <a href="#" class="flex items-start space-x-3 group">
          <div class="shrink-0 w-16 h-16 bg-gray-100 rounded-lg overflow-hidden">
            <img src="https://picsum.photos/seed/interest3/200/200" alt="帖子缩略图" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
          </div>
          <div class="flex-1">
            <h4 class="text-sm font-medium text-gray-900 line-clamp-2 group-hover:text-primary transition-colors">CSS Grid布局完全指南：从入门到精通</h4>
            <p class="text-xs text-gray-500 mt-1">4.7k 阅读 · 1周前</p>
          </div>
        </a>
      </div>
    </div>
    
  </div>
</template>

<script setup lang="ts">
// 可以在这里添加交互逻辑
</script>

<style scoped>
/* 组件特定样式 */
</style>